<template>
    <div class="home-container">
        <div class="header">
            <van-icon name="scan" color="#1989fa" />

            <div>首页</div>

            <el-button type="text">个人中心</el-button>
        </div>


        <van-search placeholder="请输入搜索关键词"></van-search>

        <!-- 
            1.新建classify.vue文件，跟home.vue平级
            2.创建路由，/classify
            3.实现header，搜索框
         -->

        <!-- 
            轮播---van-swipe
            图片---van-image
         -->
        <div class="banner">
            <van-swipe :autoplay="3000" indicator-color="#aaa">
                <van-swipe-item v-for="(item, index) in bannerList" :key="index">
                    <van-image
                        width="100%"
                        height="200px"
                        fit="contain"
                        :src="item.url"
                    />
                </van-swipe-item>
            </van-swipe>
        </div>

        <ul class="hot-list">
            <li v-for="(item, index) in channeList" :key="index">
                <img :src="item.iconUrl" style="width: 30px;height: 30px;" alt="">
                <span>{{item.name}}</span>
            </li>
        </ul>

        <van-cell title="团购专区" style="margin-top:10px;" is-link value="更多团购商品" />
        <van-cell title="品牌商直供" style="margin-top:10px;" is-link value="更多品牌商" />
        <div class="pic-list">
            <div v-for="(item, index) in brandList" :key="index" class="pic-list-item">
                <img :src="item.picUrl" style="height: 160px;margin-top: 10px;" alt="">
                <span style="margin-top:5px;">{{item.name}}</span>
            </div>
        </div>

        <van-cell title="新品首发" style="margin-top:10px;" is-link value="更多新品首发" />
        <div class="pic-list new-goods-list">
            <div v-for="(item, index) in newList" :key="index" class="pic-list-item">
                <img :src="item.picUrl" style="height: 160px;margin-top: 10px;" alt="">
                <span style="margin-top:5px;">{{item.name}}</span>
            </div>
        </div>

        <van-cell title="人气推荐" style="margin-top:10px;" is-link value="更多人气推荐" />
        <van-cell title="专题精选" style="margin-top:10px;" is-link value="更多专题精选" />
        <div class="pic-list topic-list">
            <div v-for="(item, index) in topicList" :key="index" class="pic-list-item">
                <img :src="item.picUrl" style="height: 140px;margin-top: 10px;" alt="">
                <span style="margin-top:5px;">{{item.title}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import request from '../fetch/index.js'
// import img1 from '../assets/images/apple-1.jpg'
    export default {
        data () {
            return {
                bannerList: [],
                channeList: [],
                brandList: [],
                newList: [],
                topicList: [],
                img1: require('../assets/images/apple-1.jpg'),
                img2: require('../assets/images/apple-2.jpg'),
                img3: require('../assets/images/apple-3.jpg'),
                img4: require('../assets/images/apple-4.jpg'),
                smallImg: require('../assets/images/small.jpg')
            }
        },
        mounted () {
            this.getData()
        },
        methods: {
            getData () {
                request({
                    url: 'http://192.168.200.251:8888/wx/home/index',
                    method: 'get'
                }).then(res => {
                    console.log('首页返回信息', res)
                    this.bannerList = res.data.data.banner
                    this.channeList = res.data.data.channel
                    console.log(this.channeList)
                    this.brandList = res.data.data.brandList.slice(0, 2)

                    this.newList = res.data.data.newGoodsList

                    // if (res.data.data.newGoodsList.length % 2 === 0) {
                    //     this.newList = res.data.data.newGoodsList
                    // } else {
                    //     this.newList = res.data.data.newGoodsList
                    //     this.newList.push({})
                    // }

                    this.topicList = res.data.data.topicList
                    // 品牌商直供 --- res.data.data.brandList
                    // 新品首发 --- res.data.data.newGoodsList
                    // 人气推荐 --- res.data.data.hotGoodsList
                    // 专题精选 --- res.data.data.topicList
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.home-container {
    background: #f2f2f2;
    .header {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .banner {
        background: #ffffff;
    }

    .hot-list {
        display: flex;
        align-items: flex-end;
        background: #ffffff;
        margin-top: 10px;
        width: 100%;
        height: 60px;

        li {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 60px;
            height: 50px;

            span {
                font-size: 12px;
            }
        }
    }

    .new-goods-list {
        flex-wrap: wrap;
    }

    .topic-list {
        flex-wrap: wrap;

        img {
            width: 100%;
            // height: 140px !important;
        }
    }

// * --- 0
// div --- 元素 1
// .div --- class 10
// #div --- id 100
// 行内 --- 1000
// !importan --- max

    .pic-list {
        display: flex;
        width: 100%;
        // height: 200px;
        background: #ffffff;

        >.pic-list-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50%;
            // flex: 1;
            height: 200px;
            padding: 10px;
            box-sizing: border-box;
        }
    }
}
</style>